<template>
    <div>
        <div slot="header" style="text-align: center" class="clearfix">
        <h2>{{"问卷 "+examData.exam.examSn}}</h2>
        <strong style="font-size: 15px" v-if="radioDisabled">最终得分：</strong><strong v-if="radioDisabled" style=" font-size: 15px;color: #ff3445">{{score}}</strong>
        </div>

        <div style="margin-top:3%" v-for="(oneQuestionData,i) in questionData" :key="i" >
            <el-card style="margin-left:20%;margin-right:20%" v-if="isCardAlive">
                <div slot="header" style="text-align: center" class="clearfix">
                    <span >{{ "问题"+oneQuestionData.questionSn +"："+ oneQuestionData.garbageName }}</span>
                    <span v-if="radioDisabled">{{ '-->正确答案：'}}</span>
                    <span v-if="radioDisabled" style="color: #42b983">{{ oneQuestionData.sortName}}</span>
                </div>
                <el-radio-group style="margin-left: 20% " v-model="radio[i]" @change="((val)=>{changeHandler(i,val )})">
                    <el-radio :disabled="radioDisabled"  v-for="(answerId,j) in sortData" :label="j" :key="j" >{{ sortData[j].sortName }}</el-radio>
                </el-radio-group>
            </el-card>
        </div>
        <div style="text-align: center;margin-top:30px " v-if="createVis">
            <span slot="footer" class="dialog-footer">
              <el-button @click="createExam" type="primary">开始答题</el-button>
            </span>
        </div>
        <div style="text-align: center;margin-top:30px " v-if="isCreate">
            <span slot="footer" class="dialog-footer">
              <el-button @click="resetCreate">重置</el-button>
              <el-button @click="answerExam" type="primary">提交</el-button>
            </span>
        </div>


    </div>

</template>

<script>
    export default {
        data() {
            return {
                examData: {
                    exam:{examSn:' '},
                    question:''
                },
                score:'',
                radioDisabled:false,
                isCreate:false,
                questionData: null,
                input1: "",
                radio: [],
                sortData: [],
                total:null,
                isCardAlive:false,
                createVis:true
            }
        },
        created() {
            this.getSortList();

        },
        mounted() {
            window.onbeforeunload = e => {
                if (!this.isCreate) {
                    return;
                }
                    // 通知浏览器不要执行与事件关联的默认动作
                    e.preventDefault();
                    // Chrome 需要 returnValue 被设置成空字符串
                    e.returnValue = '';


            };
        },
        methods: {
            resetCreate(){
                var i
                for (i=0;i<10;i++){
                    this.radio[i] = null
                }

                this.isCardAlive = false
                this.$nextTick(() => (this.isCardAlive = true))
            },

            changeHandler(row,value) {
                const answerId = value+1

                this.examData.question[row].answerId = answerId
                console.log(this.examData.question[row].garbageName+'的答案是:' + this.sortData[value].sortName)

            },

            async answerExam(){



                const exam = this.examData.exam.examId
                const question = this.questionData
                console.log(exam)
                console.log(question)
                const {data: res} = await this.$http.put('/question/updateAnswer', {
                    exam: exam,
                    question: question

                })
                // console.log(res)
                if (res.status !== 200) {
                    return this.$message.error(res.msg)
                }
                {
                    this.$message.success('提交成功！')
                    this.radioDisabled=true
                    this.isCreate=false
                    this.createVis=true
                }

                const {data: resp} = await this.$http.get('/question/showByExam/'+exam)
                this.score = resp.data.exam.score
                document.body.scrollTop = 0
                document.documentElement.scrollTop = 0
                console.log(resp.data.exam.score)
            },

            async getSortList() {
                const {data: res} = await this.$http.get('/sort/showAll')
                // console.log(res)
                if (res.status !== 200) {
                    return this.$message.error(res.msg+'，获取分类信息列表失败!')
                }
                // if (res.status == 200) {
                //     this.$message.success('获取分类信息列表成功!')
                // }
                this.sortData = res.data
                // console.log(res.data)
            },
            change(value){
              this.radio = value
            },
            onInput(){
                this.$forceUpdate();
            },
            async createExam(){

                const {data: res} = await this.$http.post('/exam/create/'+localStorage.getItem('userId'))
                // console.log(res)
                if (res.status !== 200) {
                    return this.$message.error(res.msg+'，获取分类信息列表失败!')
                }
                // if (res.status == 200) {
                //     this.$message.success('获取分类信息列表成功!')
                // }
                var i
                for (i=0;i<10;i++){
                    this.radio[i] = null
                }

                this.isCardAlive = false
                this.$nextTick(() => (this.isCardAlive = true))
                this.examData = res.data
                this.questionData = this.examData.question
                // console.log(res.data)
                this.isCardAlive = true
                this.radioDisabled=false
                this.isCreate = true
                this.createVis = false
                document.body.scrollTop = 0
                document.documentElement.scrollTop = 0
            }
        }
    }
</script>

<style scoped>

</style>
